<!--  -->
<template>
  <div class="channel">
    <van-tabs v-model:active="activeName" @change="tabChange">
      <van-tab
        v-for="item in categoryData.categoryList"
        :title="item.name"
        :name="item.id"
      >
        <h3
          style="
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: 18px;
            font-weight: normal;
          "
        >
          {{ item.name }}
        </h3>
        <h4 style="font-size: 14px; font-weight: normal; text-align: center">
          {{ item.front_name }}
        </h4>
        <div class="channel_body">
          <van-list
            :immediate-check="false"
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div class="list">
              <div
                class="goods_list"
                v-for="item in categoryData.goodsList"
                :key="item.id"
              >
                <GoodsBox :data="item" @click="toDetail(item.id)"></GoodsBox>
              </div>
            </div>
          </van-list>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import GoodsBox from "@/components/GoodsBox.vue";
import { GoodsCategoryData, GetCategoryGoodsListData } from "@/api/api.ts";
import { useRoute, useRouter } from "vue-router";
import { ref, onMounted, reactive, nextTick } from "vue";

const route = useRoute();
const router = useRouter();
let activeName = ref(Number(route.query.id));
const categoryData = reactive({
  categoryList: [],
  // 商品列表
  goodsList: [],
});

// body部分
const list = ref([]);
let loading = ref(false);
let finished = ref(false);
let value = ref("");
let sizes = ref(10);
const tabChange = (arg) => {
  // console.log(arg);
  loading.value = false;
  finished.value = false;
  value.value = arg;
  getGoodsList();
};
const onLoad = async () => {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求

  console.log(1);
  sizes.value += 10;
  const res = await GetCategoryGoodsListData({
    categoryId: value.value || route.query.id,
    page: 1,
    size: sizes.value,
  });
  // console.log(res);
  // console.log(res.data.data.length);
  categoryData.goodsList.push(
    ...res.data.data.slice(res.data.data.length - 10, res.data.data.length)
  );
  setTimeout(() => {
    loading.value = false;
  }, 1000);
  //   // 加载状态结束

  // finished.value = true;
  //   // 数据全部加载完成
  if (categoryData.goodsList.length >= res.data.count) {
    finished.value = true;
  }
  // }, 1000);
};
// 分类
const getCategoryList = async () => {
  const res = await GoodsCategoryData(route.query.id);
  categoryData.categoryList = res.data.brotherCategory;
  console.log(categoryData.categoryList);
};
// 数据列表
const getGoodsList = async () => {
  const res = await GetCategoryGoodsListData({
    categoryId: value.value || route.query.id,
    page: 1,
    size: sizes.value,
  });
  console.log(res);
  categoryData.goodsList = res.data.data;
};
// 路由
const toDetail = (id) => {
  router.push({
    path: "/detail",
    query: {
      id,
    },
  });
};
onMounted(() => {
  getCategoryList();
  getGoodsList();
});
</script>

<style lang="scss" scoped>
.list {
  display: flex;
  flex-flow: wrap;
  justify-content: flex-start;
}
.goods_list {
  margin: 20px 10px 0;
  width: 47%;
  height: 500px;
  background-color: #fff;
}
</style>
